<template>
    <div class="app-container" style="background-color: #F0F2F5">
        <el-row :gutter="36">
            <el-col :span="6">
                <el-card shadow="never" style="height: 108px;background-color: #037ef3!important">
                    <!--使用symbal字体图标-->
                    <svg class="font-icon" aria-hidden="true" style="width: 70px;height: 55px">
                        <use xlink:href="#iconjinrongdasha"></use>
                    </svg>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="never" style="height: 108px;background-color: #ff6a00!important;">
                    <svg class="font-icon" aria-hidden="true" style="width: 70px;height: 55px">
                        <use xlink:href="#iconbag-yen"></use>
                    </svg>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="never" style="height: 108px;background-color: #d0648a!important;">
                    <svg class="font-icon" aria-hidden="true" style="width: 70px;height: 55px">
                        <use xlink:href=" #iconicon_1"></use>
                    </svg>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="never" style="height: 108px;background-color: #e7505a!important">
                    <svg class="font-icon" aria-hidden="true" style="width: 70px;height: 55px">
                        <use xlink:href="#iconjinrongye"></use>
                    </svg>
                </el-card>
            </el-col>
        </el-row>


        <el-row :gutter="36" style="margin-top: 32px">
            <el-col :span="8">
                <el-card shadow="never" style="height: 310px;background-color: white">
                    <PieCharts2></PieCharts2>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="never" style="height: 310px;background-color: white">
                    <PieCharts></PieCharts>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="never" style="height: 310px;background-color: white">
                    <PieCharts3></PieCharts3>
                </el-card>
            </el-col>
        </el-row>

        <el-row style="margin-top: 32px">
            <el-col :span="24">
                <el-card shadow="never" style="height: 350px;background-color: white">
                    <MyChart></MyChart>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="10" style="margin-top: 32px;margin-bottom: 40px">
            <el-col :span="12">
                <el-card shadow="never" style="height: 451px;background-color: white">
                    <ChinaMap></ChinaMap>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card shadow="never" style="height: 451px;background-color: white">
                    <Carouse></Carouse>
                </el-card>
            </el-col>
        </el-row>

        <!--悬浮球-->
        <div>
            <div class="aside-nav bounceInUp animated" id="aside-nav">
                <label class="aside-menu dd-bg-blue dd-color-white" title="按住拖动" id="home-menu">总览</label>
                <a href="javascript:void(0)" title="总览" id="pandect"
                   class="menu-item menu-first dd-bg-blue dd-color-white">首页</a>
                <a href="javascript:void(0)" title="项目" id="invest-pandect"
                   class="menu-item menu-second dd-bg-blue dd-color-white">项目</a>
                <a href="javascript:void(0)" title="基金" id="fund-pandect"
                   class="menu-item menu-third dd-bg-blue dd-color-white">基金</a>
            </div>
        </div>

    </div>


</template>

<script>
    import {mapGetters} from 'vuex'

    import MyChart from '../../components/echarts/myChart'
    import PieCharts from '../../components/echarts/pieCharts'
    import PieCharts2 from '../../components/echarts/chart2'
    import PieCharts3 from '../../components/echarts/chart3'
    import Calender from "../calender/Calender"
    import Carouse from "../carouse/Carouse"
    import ChinaMap from "../map/ChinaMap"

    export default {
        name: 'Welcome',
        components: {
            MyChart: MyChart,
            PieCharts: PieCharts,
            PieCharts2: PieCharts2,
            PieCharts3: PieCharts3,
            Calender: Calender,
            Carouse: Carouse,
            ChinaMap: ChinaMap
        },
        computed: {
            ...mapGetters([
                'name'
            ])
        }
    }
</script>

<style lang="scss" scoped>
    .dashboard {
        &-container {
            margin: 30px;
        }

        &-text {
            font-size: 30px;
            line-height: 46px;
        }
    }
</style>
